<template>
	<view class="u-margin-top-40">
		<navigator url="/pages/mall/people">
			<view class="add-btn u-flex u-flex-center u-flex-grow">
				<u-icon name="plus" color="#4A9BF7"></u-icon>
				<text class="u-margin-left-10">新增</text>
			</view>
		</navigator>
	</view>
	
	<view class="peoples u-padding-top-40 u-padding-bottom-40">
	
		<view class="" v-for="(item,index) in peopleList" :key="index">
			<view class="one-item u-flex u-flex-between align-center u-margin-30">
				 <view class="u-margin-right-40">
				 	<u-icon name="trash-fill" @click="removePeople(item.id)" color="#E83600"
				 		size="18"></u-icon>
				 </view>
				<view class="u-margin-right-40">
					<navigator :url="'/pages/mall/people?id='+item.id">
						<u-icon name="edit-pen"  color="#4A9BF8" size="18"></u-icon>
					</navigator>
				</view>
				<view class="center u-flex-grow font-size14">
					<view class="name">							
						<text class="font-weight">{{item.name}}</text>							
					</view>
					<view class="u-margin-top-15">
						<text class="">手机号</text>
						<text class="color-gray u-margin-left-10">{{item.mobile}}</text>
					</view>
					<!-- <view class="card u-margin-top-15">
						<text>身份证</text>
						<text class="color-gray u-margin-left-10"> {{item.identity}}</text>
					</view> -->
				</view>
				
				<view class="check">
					<up-radio-group v-model="radioValue" @change="radioChange">
						<u-radio label="" :key="item.id" :name="item.id"></u-radio>
					</up-radio-group>
				</view>
			</view>
			<view class="line-border "> </view>
		</view>
	
	
	</view>
	
	<up-modal :show="delModalShow" :showCancelButton="true" 
	title="操作提示" @cancel="delModalShow = false"
	 @confirm="confDel">
		<view class="slot-content">
			<rich-text :nodes="'确定要删除此出行人吗？'"></rich-text>
		</view>
	</up-modal>
</template>


<script setup>
	import {
		computed,
		watch,
		ref,
		onMounted,
	} from 'vue';

	 
	import {
		usePageStore
	} from "@/common/tools/store.js"

	import {
		getPeopleList,
		delPeople
	} from "@/common/api.js";

	const emits = defineEmits(['update:open', 'select'])
	const props = defineProps({
		open: {
			type: Boolean,
			default: false,
		},
		nums: {
			type: Object,
			default: {}
		},
		isRefresh:{
			type: Boolean,
			default:undefined
		}
	})
	const radioValue = ref(0);
	const showDetail = ref(false);
	const store = usePageStore();

	//出行人
	const peopleList = ref([]);
	
	//是否打开select弹窗
	watch(() => props.open, (n, o) => {
		showDetail.value = n;
	})
	//v-model 方式 的showDetail 双向数据
	watch(showDetail, (n, o) => {
		emits("update:open", n)
	})
	watch(()=>props.isRefresh, (n,o)=>{
		// console.log('编辑后更新')
		 fetchData();
	})
 
	//组件显示是获取数据
	onMounted(()=> fetchData())
	//删除一个联系人
	const delModalShow  = ref(false);
	const delId = ref(0);
	function removePeople( id){
		delId.value = id;
		delModalShow.value = true;
	}
	//点击确定删除
	function confDel(){
		let id = delId.value;
		delModalShow.value = false;
		delPeople(id).then(ret => {
			fetchData();
		})		 
	}
	//获取出行人列表
	function fetchData() {
		getPeopleList().then((ret) => {
			peopleList.value.splice(0);			 
			peopleList.value= ret ;
		} )
	}
	//单击选择出行人
	function radioChange(e) {

		emits("update:open", false);
		let people = peopleList.value.find((item) => item.id == radioValue.value);
		// console.log('选中了人', people)
		emits("select", people);
	}
</script>

<style lang="scss">
	.add-btn {
		border: #4A9BF7 1px solid;
		padding: 10px 20px;
		border-radius: 50px;
		color: #4A9BF7;
		font-weight: bold;
	}
</style>